<template>
  <view class="broadband_box">
    <view class="broadband_itme" v-for="item in listData" :key="item" @click="onClick(item)">
      <view class="broadband_left">
        <view class="title">户号: {{ item.accountNumber }}</view>
        <view class="billTime">账单金额：{{ item.meetMoney }}</view>
        <view class="billTime">账单时间：{{ item.createTime }}</view>
        <view class="paymentTime" v-if="item.payTime">支付时间：{{ item.payTime }}</view>
        <view class="billTime">备注：{{ item.notes }}</view>
      </view>
      <view class="broadband_right">
        <view class="payment_state">{{ item.userPayStatus == 0 ? "待支付" : "已支付" }}</view>
        <view class="payment_btn">
          <view class="btn" v-if="item.userPayStatus == 0" @click="paymentJump">立即支付</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {defineProps, defineEmits} from "vue";
import {customNav} from "../../../../../utils/customNav";

const proos = defineProps({
  listData: {
    type: Array,
  }
});
const emit = defineEmits("on-click")

function onClick(item) {
  emit("on-click", item)
}

function paymentJump(item) {
  customNav("apply")
}
</script>

<style lang="less" scoped>
.broadband_box {

  .broadband_itme {
    margin: 20rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 50rpx 30rpx 20rpx 30rpx;
    background-color: @color-font;
    border-radius: 10rpx;

    .broadband_left {
      width: calc(100% - 120rpx);

      .title,
      .billTime,
      .paymentTime {
        margin-bottom: 30rpx;
      }
    }

    .broadband_right {
      width: 120rpx;
      text-align: right;

      .payment_state {
        margin-bottom: 80rpx;
      }

      .payment_btn {
        .btn {
          padding: 10rpx 30rpx;
          background-color: @color-blue;
          border-radius: 30rpx;
          color: @color-font;
        }
      }
    }
  }
}
</style>
